<template>
    <transition name="fade">
        <div class="xf-top-box xf-shadow-out" @click="goTop" v-show="isShow">
            <svg t="1713534405042" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5032" width="32" height="32"><path d="M832.522014 669.951405c0-8.782014-3.235694-17.565051-9.708106-24.26873L535.638373 348.198354c-12.932544-13.408381-33.9226-13.408381-46.855144 0l-287.172465 297.485345c-12.9438 13.408381-12.9438 35.130102 0 48.53746 12.932544 13.408381 33.9226 13.408381 46.855144 0l263.744893-273.215592 263.747963 273.215592c12.932544 13.408381 33.9226 13.408381 46.855144 0C829.28632 687.516456 832.522014 678.734442 832.522014 669.951405z" p-id="5033" fill="#ffc0cb"></path></svg>
        </div>
    </transition>
</template>

<script setup lang="ts" name="GoTop">
    import { ref, onMounted } from 'vue'
    
    const goTop = () => window.scrollTo(0, 0)

    let isShow = ref(false)

    onMounted(() => {
        document.addEventListener('scroll', () => {
            const { scrollTop } = document.documentElement
            isShow.value = scrollTop >= 200 ? true : false
        })
    })
</script>

<style scoped lang="less">
    .xf-top-box {
        position: fixed;
        bottom: 3em;
        right: 2em;
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;

        &:active {
            -webkit-box-shadow: var(--nitai5-shadow-int);
            box-shadow: var(--nitai5-shadow-int);
        }
    }
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity .35s;
    }

    .fade-enter-from,
    .fade-leave-to {
        opacity: 0;
    }

    .xf-night .xf-top-box:active {
        -webkit-box-shadow: var(--nitai5-shadow-int-dark);
        box-shadow: var(--nitai5-shadow-int-dark);
    }
</style>